<template>
  <div class="artContainer">
    <h2 class="title">{{artDetail.title}}</h2>
    <div class="artInfo">
      <div>
        <img :src="$baseUrl + artDetail.coverUrl" alt="">
      </div>
      <div class="lookNick">
        <span>{{artDetail.author && artDetail.author.nickname}}</span>
        <span class="watch">
          {{$dayjs(artDetail.createDate).format('YYYY-MM-DD hh:mm:ss')}} 
          阅读: {{artDetail.readCount}}
          评论: {{artDetail.commentCount}}
          喜欢: {{artDetail.foundCount}}
        </span>
      </div>
      <div class="tag">
        <el-tag v-for="(item,index) in artDetail.tag" :key="index" size="large" effect="dark">{{item}}</el-tag>
        </div>      
    </div>
    <!-- 文章内容区域 -->
    <div class="content">
        <mavon-editor
         v-model="artDetail.contain" 
         :subfield="false" 
         defaultOpen="preview" 
         :toolbarsFlag="false"
         :boxShadow="false"
         codeStyle="stackoverflow-dark"
         />
    </div>
    <div class="fondBtnBox">
      <div v-show="!isFond" class="goFond el-icon-star-off" @click="goFoundHandler">收藏</div>
      <div v-show="isFond" class="cancleFond el-icon-star-off" @click="cancelFondHandler">取消收藏</div>
    </div>
    <div class="commentBox">
      <div class="pic">
        <span class="el-icon-user-solid"></span>
      </div>
      <div class="text">
        <textarea placeholder="理性评论" v-model="commentFormData.content"></textarea>
        <div class="submitComment" @click="publishComment">发布</div>
      </div>
    </div>
    <div class="commentList">
      <h2>{{commentList.length}}条评论</h2>
      <div class="commentItem" v-for="(item,index) in commentList" :key="index">
        <img src="../../assets/imgs/logg.jpg" alt="">
        <div class="info">
          <div class="nickname">{{item.bindUser.nickname}}</div>
          <div class="commentContent">{{item.content}}</div>
          <div class="time">{{$dayjs(item.publishData).format('YYYY-MM-DD hh:mm:ss')}}</div>
        </div>
        <div class="floor"># {{index+1}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        artDetail:{},
        isFond:false,
        commentFormData:{
          bindUser:'',
          bindArticle:'',
          content:''
        },
        commentList:[]
      }
    },
    methods: {
      // 更新留言的方法
      async getCommentList(){
        const {status,data} = await this.$http.get('/getCommentOfArticle?id='+this.$route.params.id)
        if(status!=200) return this.$message.error(data.msg)
        this.commentList=data.commentList
      },
      // 发布留言
      async publishComment(){
        if(!localStorage.token) return this.$message.error('请先登陆')
        if(!this.commentFormData.content) return this.$message.error('留言不能为空')
        this.commentFormData.bindUser=JSON.parse(localStorage.userInfo)._id
        this.commentFormData.bindArticle=this.$route.params.id
        const{status,data} = await this.$http.post('/addComment',this.commentFormData)
        if(status!=200) return this.$message.error(data.msg)
        this.$message.success(data.msg)
        this.getCommentList()
      },

      // 收藏文章
     async goFoundHandler(){
        if(!this.token) return this.$message.error('请先登陆')
        const { status,data } = await this.$http.get('/addUserFond?arrId=' + this.artDetail._id)
        this.isFond=true
        if(status==200) return this.$message.success(data.msg)
        if(status!=200) return this.$message.error(data.msg)
      },
      // 取消收藏文章
     async cancelFondHandler(){
          // 执行删除用户
           this.$confirm('是否确定去掉收藏, 是否继续?', '提示', {
          type: 'warning'
        }).then(async () => {
        //  请求取消收藏
        const {status,data} = await this.$http.delete('/deleteUserFond?arrId=' + this.artDetail._id)
        if(status!=200) return 
        this.isFond=false
        this.$message.success(data.msg)

        }).catch(() => {
        });
      },
    },
    async created() {
      const id = this.$route.params.id
      const { status,data } = await this.$http.get('/artDetail?id=' + id)
      if(status!=200) return this.$message.err(data.msg)
      this.artDetail=data.data
      this.getCommentList()
    },
  }
</script>
<style lang="less">
.hljs{
  border-radius: 8px !important;
  padding-left: 20px;
}
</style>
<style lang="less" scoped>
.commentList{
  .commentItem{
    overflow: hidden;
     margin-bottom: 30px;
     position: relative;
     height: 100px;
    //  text-overflow: ellipsis;
    //  white-space: nowrap;
  img{
    height: 100px;
    float: left;
    margin-right: 18px;
  }
  .info{
    float: left;
    font-size: 14px;
    .nickname{
      font-weight: 700;
    }
    .commentContent{
      position: absolute;
      left: 90px;
      top: 20px;
      width: 700px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
      margin: 10px 0;
    }
    .time{
      position: absolute;
      left: 90px;
      bottom: 0;
      font-size: 12px;
      color: #555;
    }
  }
  .floor{
    float: right;
  }
} 
}

.commentBox{
  overflow: hidden;
  .pic{
    float: left;
    margin-top: 55px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background-color: #ccc;
    border-radius: 50%;
    color: #fff;
    font-size: 30px;
  }
  .text{
    textarea{
      float: left;
      margin-top: 30px;
      width: 600px;
      height: 100px;
      resize: none;
      outline: none;
      color: #333;
      border-radius: 5px;
      margin-left: 10px;
      padding: 10px;
      border: 1px solid #333;
      font-size: 15px;
    }
    textarea:hover{
      border-color: deeppink;
    }
    textarea:focus{
      border-color: deeppink;
    }
    .submitComment{
       float: left;
       width: 60px;
       height: 30px;
       text-align: center;
       line-height: 30px;
       background-color: deeppink;
       margin-top: 70px;
       margin-left: 20px;
       border-radius: 5px;
       cursor: pointer;
       color: #fff;

    }
  }
}
.fondBtnBox{
  border-bottom: 1px solid #ccc;
  padding: 30px;
  text-align: center;
  .goFond,
  .cancleFond{
    width: 80px;
    height: 30px;
    font-size: 14px;
    border-radius: 5px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
  .goFond{
    border: 1px solid deeppink;
    color: deeppink;
    box-sizing: border-box;
  }
  .goFond:hover{
    background-color: deeppink;
    color: #fff;
  }
  .cancleFond{
    background-color: deeppink;
    color: #fff;
  }
}
.artContainer{
  width: 888px;
  height: 1600px;
}
.title{
  text-align: center;
  margin: 40px 0;
}
.artInfo{
  position: relative;
  // background-color: #333;
  // border: 1px solid rgb(200, 198, 198);
  height: 110px;
  margin-bottom: 10px;
  .tag{
      position: absolute;
      top: 40px;
      right: 0;
    .el-tag{
        margin-left: 5px;
      }
    }
  img{
    height: 110px;
    border-radius: 50%;
  }
  .lookNick span:first-child{
    position: absolute;  
    top:0;
    left: 200px;
    font-size: 20px;
    
  }
  .lookNick span:last-child{
    position: absolute;  
    bottom:0;
    left: 200px;
    color: #333;
    font-size: 15px;
  }
 
}
</style>